<template>
  <div class="property">
    <el-form
      :model="formData"
      v-form
      data-vv-scope="propertyForm"
      label-width="140px"
      class="property-form"
    >
      <ht-form-item label="学年学期">
        <ht-select
                v-model="formData.xqid"
                :options="semesterOptions"
                display-style="block"
                :permission="semesterOptions.length===1? 'r':'w'"
                :validate="'required'"
        ></ht-select>
      </ht-form-item>
      <div
        v-for="(group, groupIndex) in groupList"
        :key="groupIndex"
        class="group-box"
      >
        <ht-form-item
          :label="item.mc"
          v-for="(item, index) in group.children"
          :key="index"
        >
          <ht-input
            v-model="item.sjz"
            v-if="item.kjlx == 'number'"
            type="number"
            display-style="block"
            :min="item.srkpz ? JSON.parse(item.srkpz).min : null"
            :max="item.srkpz ? JSON.parse(item.srkpz).max : null"
            :validate="item.srkpz && JSON.parse(item.srkpz).required ? 'required' : ''"
            permission="r"
          ></ht-input>
          <ht-select
            v-model="item.sjz"
            v-if="item.kjlx == 'select'"
            :options="item.srkpz ? JSON.parse(item.srkpz).options : []"
            display-style="block"
            :validate="item.srkpz && JSON.parse(item.srkpz).required ? 'required' : ''"
            permission="r"
          ></ht-select>
        </ht-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import course from '@/api/course.js'
import {Base64} from 'js-base64'

export default {
  name: 'CoursePropertySetting',
  props: {
    editId: String,
    editData: Object
  },
  // 排课属性 pksx
  data() {
    return {
      formData: {
        xqmc: '', // 学期名称
        xqid: '' // 学期id
      },
      formFieldList: [],
      groupOrderList: [],
      semesterOptions:[]
    }
  },
  computed: {
    groupList() {
      let arr = []
      this.formFieldList.forEach(k => {
        let order = this.groupOrderList.find(item => {
          return item.key == k.fz
        })
        let index = arr.findIndex(j => {
          return j.fz == k.fz
        })
        if (index === -1) {
          arr.push({
            fz: k.fz,
            children: [k],
            order: order ? order.order : 0
          })
        } else {
          arr[index].children.push(k)
        }
      })
      arr = arr.sort(function(a, b) {
        return a.order - b.order
      })
      return arr
    }
  },
  async created() {
    this.getSemesterOptions();
    let res = await course.getPropertyGroupList()
    this.groupOrderList = res
    if (!this.editId) {
      // 获取当前学年
      this.getCurrentSemester()
      // 获取动态属性
      this.getFormField()
    } else {
      this.formFieldList = JSON.parse(Base64.decode(this.editData.pksx))
      this.formData.xqmc = this.editData.xqmc
      this.formData.xqid = this.editData.xqid
    }

  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    getSemesterOptions() {
        course.getDicListByKeys('semester').then(res => {
            this.semesterOptions = res.value.semester
        })
    },
    // 校验数据
    validateData() {
      return new Promise(resolve => {
        this.$validator.validateAll('propertyForm').then(result => {
          if (result) {
            let params = {
              xqmc: this.formData.xqmc,
              xqid: this.formData.xqid,
              pksx: Base64.encode(JSON.stringify(this.formFieldList))
            }
            resolve(params)
          } else {
            this.$message.warning('有数据未通过校验！')
            resolve(false)
          }
        })
      })
    },
    getFormField() {
      course.getFormFieldList().then(res => {
        res.forEach(k => {
          k.sjz = k.mrz
        })
        this.formFieldList = res
      })
    },
    getCurrentSemester() {
      course.getCurrentSemester().then(res => {
        if (res) {
          this.formData.xqmc = res.xqmc
          this.formData.xqid = res.xqid
          this.$emit("update:editData",this.formData);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.property {
  padding: 24px;
  box-sizing: border-box;
  .property-form {
    ::v-deep .ht-form-item {
      width: 48%;
      .el-input-number {
        width: 100%;
      }
    }
    .group-box {
      border-top: 1px solid $project-border-color;
      padding-top: 16px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
